<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>受案登记表</h1>
      </div>
      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <td colspan="2">案件来源</td>
          <td colspan="11">
            <el-radio-group v-model="tableData.caseType">
              <el-radio v-for="(item,index) in ['110指令','工作中发现','报案','投案','移送','扭送','其他']" :key="item" :label="index">{{ item }}</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td rowspan="4">报案人</td>
          <td colspan="2">姓名</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.reporterName" type="text">
            <span v-else>{{ tableData.reporterName }}</span>
          </td>
          <td colspan="2">性别</td>
          <td colspan="2">
            <el-select v-if="patternIsEdit" v-model="tableData.reporterSex" placeholder="请选择">
              <el-option label="男" :value="0" />
              <el-option label="女" :value="1" />
            </el-select>
            <span v-else>{{ ['男','女'][tableData.reporterSex] }}</span></td>
          <td colspan="2">出生日期</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.reporterBirth" type="text">
            <span v-else>{{ tableData.reporterBirth }}</span></td>
        </tr>
        <tr>
          <td colspan="2">身份证种类</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.reporterIdcardType" type="text">
            <span v-else>{{ tableData.reporterIdcardType }}</span></td>
          <td colspan="2">证件号码</td>
          <td colspan="6">
            <input v-if="patternIsEdit" v-model="tableData.reporterIdcard" type="text">
            <span v-else>{{ tableData.reporterIdcard }}</span></td>
        </tr>
        <tr>
          <td colspan="2">工作单位</td>
          <td colspan="4">
            <input v-if="patternIsEdit" v-model="tableData.reporterUnit" type="text">
            <span v-else>{{ tableData.reporterUnit }}</span></td>
          <td colspan="2">联系方式</td>
          <td colspan="4">
            <input v-if="patternIsEdit" v-model="tableData.reporterPhone" type="text">
            <span v-else>{{ tableData.reporterPhone }}</span></td>
        </tr>
        <tr>
          <td colspan="2">现住址</td>
          <td colspan="10">
            <input v-if="patternIsEdit" v-model="tableData.reporterAddress" type="text">
            <span v-else>{{ tableData.reporterAddress }}</span></td>
        </tr>
        <tr>
          <td colspan="2">移送单位</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.transferUnit" type="text">
            <span v-else>{{ tableData.transferUnit }}</span></td>
          <td colspan="2">移送人</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.transferPersonnel" type="text">
            <span v-else>{{ tableData.transferPersonnel }}</span></td>
          <td colspan="2">联系方式</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.transferPhone" type="text">
            <span v-else>{{ tableData.transferPhone }}</span></td>
        </tr>
        <tr>
          <td colspan="2">接报人员</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.reportedPersonnel" type="text">
            <span v-else>{{ tableData.reportedPersonnel }}</span></td>
          <td colspan="2">接报时间</td>
          <td colspan="2">
            <input v-if="patternIsEdit" v-model="tableData.reportedDate" type="date">
            <span v-else>{{ tableData.reportedDate }}</span></td>
          <td colspan="2">接报地点</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.reportedAddress" type="text">
            <span v-else>{{ tableData.reportedAddress }}</span></td>
        </tr>
        <tr>
          <td colspan="13" style="height:250px">
            <div class="box" style="padding:10px" :style="!patternIsEdit && 'background:none'">
              <textarea v-if="patternIsEdit" v-model="tableData.caseBrief" rows="9" style="width:100%" type="text" />
              <span v-else>{{ tableData.caseBrief }}</span>

            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">受案意见</td>
          <td colspan="11" style="height:250px">
            <div class="box" flex="dir:top main:justify" style="padding:10px" :style="!patternIsEdit && 'background:none'">
              <textarea v-if="patternIsEdit" v-model="tableData.caseOpinion" rows="8" />
              <span v-else>{{ tableData.caseOpinion }}</span>
              <div flex="main:justify">
                <div> 受案人员：
                  <input v-if="patternIsEdit" v-model="tableData.caseOpinionPersonnel" class="custom_input" type="text">
                  <span v-else class="custom_input">{{ tableData.caseOpinionPersonnel }}</span></div>
                <div>受案时间：
                  <input v-if="patternIsEdit" v-model="tableData.caseOpinionTime" class="custom_input" type="date">
                  <span v-else class="custom_input">{{ tableData.caseOpinionTime }}</span></div>
              </div>
            </div>

          </td>
        </tr>
        <tr>
          <td colspan="2">受案审批</td>
          <td colspan="11" style="height:200px">
            <div class="box" flex="dir:top main:justify" style="padding:10px" :style="!patternIsEdit && 'background:none'">
              <textarea v-if="patternIsEdit" v-model="tableData.caseApproval" rows="8" />
              <span v-else>{{ tableData.caseApproval }}</span>
              <div flex="main:justify">
                <div>
                  受案部门负责人：
                  <input v-if="patternIsEdit" v-model="tableData.caseApprovalPersonnel" style="width:150px" class="custom_input" type="text">
                  <span v-else class="custom_input">{{ tableData.caseApprovalPersonnel }}</span></div>
                <div>审批时间：
                  <input v-if="patternIsEdit" v-model="tableData.caseApprovalTime" class="custom_input" type="date">
                  <span v-else class="custom_input">{{ tableData.caseApprovalTime }}</span></div>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <p style="">一式      份，交当事人      份，存档一份。</p>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->
    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  data() {
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/caseRegistration',
      tableData: {
        'archivesId': 0,
        'brigade': 'string',
        'caseApproval': 'string',
        'caseApprovalPersonnel': 'string',
        'caseApprovalTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'caseBrief': 'string',
        'caseOpinion': 'string',
        'caseOpinionPersonnel': 'string',
        'caseOpinionTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'caseType': 0,
        'id': 0,
        'no': 'string',
        'reportedAddress': 'string',
        'reportedDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'reportedPersonnel': 'string',
        'reporterAddress': 'string',
        'reporterBirth': 'string',
        'reporterIdcard': 'string',
        'reporterIdcardType': 'string',
        'reporterName': 'string',
        'reporterPhone': 'string',
        'reporterSex': 0,
        'reporterUnit': 'string',
        'title': 'string',
        'transferPersonnel': 'string',
        'transferPhone': 'string',
        'transferUnit': 'string'
      }
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      // formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
      formData.reportedDate = `${formData.reportedDate} 00:00:00`
      formData.caseOpinionTime = `${formData.caseOpinionTime} 00:00:00`
      formData.caseApprovalTime = `${formData.caseApprovalTime} 00:00:00`

      formData.title = '受案登记表'
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const formData = res.data
        formData.reportedDate = parseTime(formData.reportedDate, '{y}-{m}-{d}')
        formData.caseOpinionTime = parseTime(formData.caseOpinionTime, '{y}-{m}-{d}')
        formData.caseApprovalTime = parseTime(formData.caseApprovalTime, '{y}-{m}-{d}')
        this.tableData = formData
      })
    }

  }
}
</script>

